const classNameValues = {
  // --------------------------------------------------------------------------
  // Layout
  // --------------------------------------------------------------------------
  position: ['relative', 'absolute', 'sticky'],
  display: ['block', 'flex', 'grid'],
  flexDirection: ['row', 'row-reverse', 'col', 'col-reverse'],
  // --------------------------------------------------------------------------
  // Sizing
  // --------------------------------------------------------------------------
  // width: '',
  // minWidth: '',
  // height: '',
  // minHeight: '',
  // --------------------------------------------------------------------------
  // Spacing
  // --------------------------------------------------------------------------
  // marginTop: '',
  // marginRight: '',
  // marginBottom: '',
  // marginLeft: '',
  // paddingTop: '',
  // paddingRight: '',
  // paddingBottom: '',
  // paddingLeft: '',
  // --------------------------------------------------------------------------
  // Typography
  // --------------------------------------------------------------------------
  fontSize: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'],
  fontWeight: [
    'hairline',
    'thin',
    'light',
    'normal',
    'medium',
    'semibold',
    'bold',
    'extrabold',
    'black',
  ],
  textTransform: ['uppercase', 'lowercase', 'capitalize', 'normal-case'],
  leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'],
  // --------------------------------------------------------------------------
  // Background
  // --------------------------------------------------------------------------
  // backgroundColor: '',
  // --------------------------------------------------------------------------
  // Effect
  // --------------------------------------------------------------------------
  opacity: ['0', '25', '50', '75', '100'],
};

export default classNameValues;
